<%--
  Created by IntelliJ IDEA.
  User: gu
  Date: 2021/7/15
  Time: 11:54 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>规则详情</title>
    <!-- CSS -->
    <jsp:include page="../include/headtag.jsp" />
    <!-- <link rel="stylesheet"
        href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500"> -->
    <link rel="stylesheet"
          href="assets/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/form-elements.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <%
        /********** 保存网站的基本路径 ***********/
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
                + path + "/";
        //将该路径地址缓存到 session中 ,例如：http://localhost:8090/tjnu_ssh_1128/
        session.setAttribute("mybasePath", basePath);
    %>
    <script src="${mybasePath}assets/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="container-fluid" id="mydivs"></div>
<script type="text/javascript">
    function createAddEnumDivByData(index,detailsnames,detailsvalues){
        var html='<div class="container-fluid" style="display: none" id="addenums'+index+'">' +
            '<div class="row" style="margin-top: 10px">' +
            '<div class="col-md-6"><p>含义</p></div>' +
            '<div class="col-md-6"><p>编码</p></div>' +
            '</div>';
        var dm=detailsnames.split(","); //字符分割
        var dv=detailsvalues.split(","); //字符分割
        for (var i=0;i<dm.length ;i++)
        {
            html=html+'<div class="row" style="margin-top: 10px">' +
                '<div class="col-md-6"><input type="text" class="form-control" size="10" name="enum_names[]" value="'+dm[i]+'" required="required" readonly="readonly"></div>' +
                '<div class="col-md-6"><input type="text" class="form-control" size="10" name="enum_values[]" value="'+dv[i]+'" placeholder="输入码段位数之内的数字" oninput="codeLengthChangeInput('+index+',this)" required="required"  readonly="readonly"></div>' +
                '</div>';
        }
        html=html+' </div>';
        $("#mydivs").append(html);
    }
    function createAddNonEnumDivByData(index,upperLimit,lowerLimit){
        var html='<div class="container-fluid" style="display: none" id="addnonenums'+index+'">' +
            '<div class="form-group has-feedback ">' +
            '<div class="input-group" style="margin-top: 30px">' +
            '<span class="input-group-addon">上限</span>' +
            '<input type="text" class="form-control" name="inputGroupSuccess1" value="'+upperLimit+'" required="required" readonly="readonly">' +
            '</div>' +
            '<div class="input-group" style="margin-top: 30px">' +
            '<span class="input-group-addon">下限</span>' +
            '<input type="text" class="form-control" name="inputGroupSuccess2" value="'+lowerLimit+'" required="required" readonly="readonly">' +
            '</div>' +
            '</div>' +
            '</div>';
        $("#mydivs").append(html);
    }
</script>
<%--动态生成div--%>
<script type="text/javascript">
    function createLayFrame(){
        layui.use('layer', function(){ //独立版的layer无需执行这一句
            var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
            var code_category=0;
            var index_now=1;
            //触发事件
            var active = {
                setTop: function(){
                    var that = this;
                    //多窗口模式，层叠置顶
                    layer.open({
                        type: 1 //此处以iframe举例
                        ,title: mytitle
                        ,area: ['780px', '520px']
                        ,shade: 0
                        ,maxmin: false
                        ,offset: 'auto'
                        ,content: mycontext
                        ,cancel:function (){
                            var detailsname='';
                            var detailsvalue='';
                            var place=$("#dynamicTable tbody input[name='index'][value="+index_now+"]").parent().parent().index()+1;
                            if(code_category==1){
                                var dn=$("#addenums"+index_now+" input[name='enum_names[]']");
                                var dv=$("#addenums"+index_now+" input[name='enum_values[]']");
                                for(var i=0;i<dn.length;i++){
                                    detailsname=detailsname+dn[i].value+',';
                                    detailsvalue=detailsvalue+dv[i].value+',';
                                }
                                detailsname=detailsname.substring(0,detailsname.length-1);
                                detailsvalue=detailsvalue.substring(0,detailsvalue.length-1);

                                document.querySelector("#dynamicTable > tbody > tr:nth-child("+place+") > td:nth-child(4) > input[type=hidden]:nth-child(2)").value=detailsname;
                                document.querySelector("#dynamicTable > tbody > tr:nth-child("+place+") > td:nth-child(4) > input[type=hidden]:nth-child(3)").value=detailsvalue;
                                $(eval("addenums"+index_now)).hide();
                            }else {
                                var ul=$("#addnonenums"+index_now+" input[name='inputGroupSuccess1']");
                                var ll=$("#addnonenums"+index_now+" input[name='inputGroupSuccess2']");
                                detailsvalue=detailsvalue+ul[0].value+',';
                                detailsvalue=detailsvalue+ll[0].value;
                                document.querySelector("#dynamicTable > tbody > tr:nth-child("+place+") > td:nth-child(4) > input[type=hidden]:nth-child(3)").value=detailsvalue;
                                $(eval("addnonenums"+index_now)).hide();
                            }
                            layer.closeAll();
                        }
                        ,zIndex: layer.zIndex //重点1
                        ,success: function(layero, index){
                        }
                        ,end: function(){
                        }
                    });
                }
            };
            $("[name='details']").on('click', function(){
                code_category=$(this).parent().parent().find("select").val();
                index_now=$(this).parent().find("[name='index']").val();
                if (code_category==1){
                    //枚举类
                    var id ='#addenums'+index_now;
                    mytitle="枚举类添加";
                    mycontext=$(id);
                }else {
                    //非枚举类
                    mytitle="非枚举类添加";
                    mycontext=$("#addnonenums"+index_now);
                }
                var othis = $(this), method = othis.data('method');
                active[method] ? active[method].call(this, othis) : '';
            });
            //多窗口模式 - esc 键
            $(document).on('keyup', function(e){
                if(e.keyCode === 27){
                    layer.close(layer.escIndex ? layer.escIndex[0] : 0);
                }
            });
        });
    }
</script>
<jsp:include page="../include/head.jsp" />
<jsp:include page="../include/menu.jsp" />
<div id="page-wrapper" style="margin-top: 50px;">
    <div id="page-inner">
        <div class="text-left">
            <a href="/index">首页</a>&nbsp;&gt;&nbsp;<a href="/codeManageIndex" class="acts CurrChnlCls">编码管理</a>&nbsp;&gt;&nbsp;<a href="/codeAbolishList" class="acts CurrChnlCls">可废除编码列表</a>&nbsp;&gt;&nbsp;<a class="acts CurrChnlCls">废除编码</a>
        </div>
        <div class="row">
            <div class="col-md-12">
                <h3 class="text-left">编码废除</h3>
                <div class="col-md-12">
                    <div class="nav navbar-nav navbar-right">
                        <a href="/codeDesignIndex">自定义编码设计</a>
                    </div>
                </div>
            </div>
        </div>
        <hr />
        <br />
        <div class="container-fluid">
            <form action="/codeAbolishApplication" class="col-sm-12 select-info table-bordered" method="post">
                <input type="hidden" name="codeRuleId" value="${param.codeRuleId}">
                <table class="table-bordered">
                    <br />
                    <!------------------------------------------------------码段前的多个选择输入框部分----------------------------------------------------------->
                    <tr>
                        <div class="row">
                            <div class="form-horizontal">
                                <div class="col-md-2">
                                    <label for="codeDesignName">方案名称</label>
                                </div>
                                <div class="col-md-2">
                                    <input id="codeDesignName" class="form-control" name="codeDesignName" value="${codeRule.codeRuleName}" readonly="readonly">
                                </div>
                                <div class="col-md-2">
                                    <label for="userName">申请人</label>
                                </div>
                                <div class="col-md-2">
                                    <input id="userName" class="form-control" name="userName" readonly="readonly" value="${creatorName}">
                                </div>
                                <div class="col-md-2">
                                    <label for="categoryOptions">大类码段</label>
                                </div>
                                <div class="col-md-2">
                                    <select id="categoryOptions" class="form-control" role="select" name="categoryOptions" onchange="keepCategoryOptions()">
                                        <option value="1">动物</option>
                                        <option value="2">房间</option>
                                        <option value="3">表单</option>
                                        <option value="4">项目</option>
                                        <option value="5">人事</option>
                                        <option value="6">实验</option>
                                        <option value="7">设备</option>
                                        <option value="8">样本</option>
                                    </select>
                                </div>
                            </div>
                            <br />
                            <br />
                            <div class="form-horizontal">
                                <div class="col-md-2">
                                    <label for="serial_number">流水号位数</label>
                                </div>
                                <div class="col-md-2">
                                    <input id="serial_number" class="form-control" name="serial_number" value="${codeRule.serialNumber}" readonly="readonly">
                                </div>
                                <div class="col-md-2">
                                    <label for="category">种类名称</label>
                                </div>
                                <div class="col-md-2">
                                    <input  id="category" name="category" class="form-control" value="${category.category}"  readonly="readonly">
                                </div>
                                <div class="col-md-2">
                                    <label for="categorydetail">种类码段</label>
                                </div>
                                <div class="col-md-2">
                                    <input placeholder="输入两位字母或数字" oninput="this.value=this.value.replace(/[\W]/g,'');if(this.value.length>2)this.value=this.value.slice(0,2)" id="categorydetail" name="categorydetail" class="form-control" required="required" value="${category.details}"   readonly="readonly"/>
                                </div>
                            </div>
                        </div>
                    </tr>
                    <br />
                    <tr>
                        <div class="row">
                            <div class="form-horizontal">
                                <div class="col-md-1">
                                    <label for="codeDescribe">详细描述 </label>
                                </div>
                                <div class="col-md-11">
                        <textarea id="codeDescribe" class="form-control" name="codeDescribe"
                                  style="resize: none;
                                  LINE-HEIGHT:18px;padding: 3px;width:100%;height:100px;max-width:100%;max-height: 100px;"  readonly="readonly">${codeRule.codeRuleIntro}</textarea>
                                </div>
                            </div>
                        </div>
                    </tr>
                    <br />
                    <tr>
                        <div class="row">
                            <table id="dynamicTable" class="table table-hover text-nowrap" style="table-layout:fixed;word-break:break-all;">
                                <tbody>
                                <tr>
                                    <td align="center">
                                        码段名称
                                    </td>
                                    <td align="center">
                                        码段种类
                                    </td>
                                    <td align="center">
                                        码段位数
                                    </td>
                                    <td align="center" >
                                        详细描述
                                    </td>
                                </tr>
                                <!------------------------------------------------------码段具体部分----------------------------------------------------------->
                                <c:set var="i" value="0" />
                                <c:set var="j" value="0" />

                                <c:forEach begin="1" end="${basicEnumSums.size()+nonEnums.size()}" var="codecodecount" varStatus="loop" step="1">
                                    <c:choose>
                                        <c:when test="${basicEnumSums[i].codeCodeId==codecodecount}">
                                            <tr>
                                                <td align="center">
                                                    <input class="form-control" name="code_names[]" value="${basicEnumSums[i].details}" style="width: 132.5px;height: 50px"   readonly="readonly"/>
                                                </td>
                                                <td align="center">
                                                    <select class="form-control" role="select" name="code_categorys[]" style="width: 132.5px;height: 50px" onchange="this.selectedIndex=0">
                                                        <option value="1" selected>枚举</option>
                                                        <option value="2">非枚举</option>
                                                    </select>
                                                </td>
                                                <td align="center">
                                                    <input class="form-control" role="select" name="code_nums[]" style="width: 130px;height: 50px" value="${basicEnumSums[i].codeLength}" readonly="readonly"/>
                                                </td>
                                                <td align="center">
                                                    <input type="hidden" name="index" value="${codecodecount}">
                                                    <input type="hidden" name="detailsname[]" value="${basicEnumSums[i].detailsNames}">
                                                    <input type="hidden" name="details[]" value="${basicEnumSums[i].basicEnumerations}">
                                                    <input type="button" value="查看" class="btn btn-success" data-method="setTop" name="details">
                                                </td>
                                                <script type="text/javascript">
                                                    createAddEnumDivByData("${codecodecount}","${basicEnumSums[i].detailsNames}","${basicEnumSums[i].basicEnumerations}");
                                                    createLayFrame();
                                                </script>
                                            </tr>
                                            <c:set var="i" value="${i+1}" />
                                        </c:when>
                                        <c:otherwise>
                                            <tr>
                                                <td align="center">
                                                    <input class="form-control" name="code_names[]" value="${nonEnums[j].details}" style="width: 132.5px;height: 50px"   readonly="readonly"/>
                                                </td>
                                                <td align="center">
                                                    <select class="form-control" role="select" name="code_categorys[]" style="width: 132.5px;height: 50px" onchange="this.selectedIndex=1">
                                                        <option value="1">枚举</option>
                                                        <option value="2" selected>非枚举</option>
                                                    </select>
                                                </td>
                                                <td align="center">
                                                    <input class="form-control" role="select" name="code_nums[]" style="width: 130px;height: 50px"  readonly="readonly" value="${nonEnums[j].codeLength}"/>
                                                </td>
                                                <td align="center">
                                                    <input type="hidden" name="index" value="${codecodecount}">
                                                    <input type="hidden" name="detailsname[]" value="">
                                                    <input type="hidden" name="details[]" value="${nonEnums[j].upperLimit},${nonEnums[j].lowerLimit}">
                                                    <input type="button" value="查看" class="btn btn-success" data-method="setTop" name="details">
                                                </td>
                                                <script type="text/javascript">
                                                    createAddNonEnumDivByData("${codecodecount}","${nonEnums[j].upperLimit}","${nonEnums[j].lowerLimit}");
                                                    createLayFrame();
                                                </script>
                                            </tr>
                                            <c:set var="j" value="${j+1}" />

                                        </c:otherwise>

                                    </c:choose>

                                </c:forEach>
                                </tbody>
                            </table>
                        </div>
                    </tr>
                    <br />

                    <tr>
                        <div class="row">
                            <div class="form-horizontal">
                                <div class="col-md-1">
                                    <label for="manageContent">废除原因 </label>
                                </div>
                                <div class="col-md-11">
                        <textarea id="manageContent" class="form-control" name="manageContent"
                                  style="resize: none;
                                  LINE-HEIGHT:18px;padding: 3px;width:100%;height:100px;max-width:100%;max-height: 100px;" required="required"></textarea>
                                </div>
                            </div>
                        </div>
                    </tr>
                    <br />

                    <tr>
                        <div class="row">
                            <input type="hidden" id="codeCodeCount" name="codeCodeCount">
                            <button type="submit" class="col-lg-4 col-lg-offset-4" name="submit">提交</button>
                        </div>
                    </tr>
                </table>
            </form>

        </div>
    </div>
    <!-- /. PAGE INNER  -->
</div>

<!-- /. PAGE WRAPPER  -->

</body>
<%--<!-- Javascript -->--%>

<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/bootstrap/js/jquery.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>

<script type="text/javascript">
    function addEnum(index){
        var html=
            '<div class="row" style="margin-top: 10px">' +
            '<div class="col-md-4"><input type="text" class="form-control" size="10" name="enum_names[]" required="required"></div>' +
            '<div class="col-md-4"><input type="text" class="form-control" size="10" name="enum_values[]" placeholder="输入码段位数之内的数字" oninput="codeLengthChangeInput('+index+',this)" required="required"></div>' +
            '<div class="col-md-4"><input type="button" class="btn btn-danger" onclick="delEnum(this,'+index+')" value="删除"></div>' +
            '</div>';
        $("#addenums"+index).append(html);
    }
    function delEnum(opp,index) {
        var enumLength = $("#addenums"+index+" div.row").length;
        if (enumLength <= 3) {
            alert("至少保留一行");
        } else {
            $(opp).parent().parent().remove();//移除当前行
        }
    }
</script>

<script type="text/javascript">
    var index=$("#dynamicTable tbody tr").length;
    var count=$("#dynamicTable tbody tr").length;    //递增的开始值
    var mytitle="";
    var mycontext=document.getElementById("addenums1");
    document.getElementById("codeCodeCount").value=count;
</script>
<script  type="text/javascript">
    keepCategoryOptions();
    function keepCategoryOptions(){
        var s = document.getElementById('categoryOptions');
        for(var i = 0 ;i < s.options.length;i++){
            if(s.options[i].value ==  ${codeRule.ruleCategoryId}){
                s.options[i].selected = true;
            }
        }
    }
</script>
</html>

